<template>
  <div class="app-container">
    <el-form :inline="true" label-width="80px">
      <el-form-item label="品牌">
        <el-input v-model="listQuery.name"></el-input>
      </el-form-item>
     <el-button type="primary" @click="getList()">搜索</el-button>
     <el-button type="primary" @click="addopen()">新增</el-button>
    </el-form>

    <el-table :data="list" border style="width: 100%">
      <el-table-column label="品牌名称" prop="name"></el-table-column>
      <el-table-column label="链接地址" prop="url"></el-table-column>

      <el-table-column label="LOGO">
        <template slot-scope="{row}">
          <el-image  style="width: 70px; height: 70px" :src="row.picturePathHttp"  :preview-src-list="[row.picturePathHttp]"> </el-image>
        </template>
      </el-table-column>

      <el-table-column  label="品牌精选图片">
        <template slot-scope="{row}">
          <el-image  style="width: 70px; height: 70px" :src="row.indexImgPathHttp"  :preview-src-list="[row.bannerPathHttp]"> </el-image>
        </template>
      </el-table-column>

       <el-table-column  label="上传BANNER">
        <template slot-scope="{row}">
          <el-image  style="width: 70px; height: 70px" :src="row.bannerPathHttp"  :preview-src-list="[row.bannerPathHttp]"> </el-image>
        </template>
      </el-table-column>

 <el-table-column  label="上传APP品牌">
        <template slot-scope="{row}">
          <el-image  style="width: 70px; height: 70px" :src="row.appBannerPathHttp"  :preview-src-list="[row.bannerPathHttp]"> </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
           <template slot-scope="scope">
        <el-button type="text" @click="openEdit(scope.row)" >修改</el-button>
        <el-button type="text" @click="del(scope.row)" style="color:red" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    
    <addBrand ref="addBrand" />
  </div>
</template>

<script>
import apibrandManage from "@/api/frontManage/brandManage";
import {confirm} from "@/utils/index"
import Pagination from "@/components/Pagination";
import addBrand from './dialogAddBrand'
export default {
  name: "brandmanage",
  components: {Pagination,addBrand},
  data() {
    return {
      list: [],
      total:0,
      listQuery: {
        pageNo: 1,
        pageSize:10,
        name: "",
        id:"",
        url:"",
        picturePath:"",
        indexImgPath:"",
      }
    };
  },
  created() {
    this.getList();
  },

  methods: {
    //表单
    getList() {
      apibrandManage.query(this.listQuery).then(res=>{
      this.list = res.data.page.list;
      this.total = res.data.page.total
      })
    },
    //删除
    del(row){
        confirm('是否删除').then(()=>{
           apibrandManage.delete(row.id).then(res=>{
           this.$message({type:"success",message:"删除成功！"});
           this.getList();
           })
        })
    },
    //修改
    openEdit(row){
        this.$refs.addBrand.open(row.id)
    },
    //新增
    addopen(){
      this.$refs.addBrand.open()
    }
  }
};
</script>

<style  scoped>
</style>